<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-熊猫慢直播</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #title-container {
        position: absolute;
        height: 46px;
        line-height: 46px;
        padding: 0 20px;
        width: 460px;
        background: url(./images/controls/live-title-bg.png) 0 0;
        right: 0;
        bottom: 50px;
        z-index: 100;
        font-size: 20px;
        color: #fff;
        overflow: hidden;
      }
      #classify-container{
        position: relative;
      }
      #classify {
        position: absolute;
        left: 50px;
        top: 50px;
        z-index: 1000;
        padding: 10px;
        height: 600px;
        width: 320px;
        overflow: hidden;
      }
      #classify .item {
        width: 255px;
        height: 135px;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 12px;
      }
      #classify .item.focus {
        transform: scale(1);
        width: 310px;
        height: 160px;
        border-width: 5px;
      }
      #shadow {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: none;
      }
    </style>
  </head>
  <body onload="init()" onunload="exit()">
    <div id="main">
	<!--联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!--联通不要 -->
      <div id="shadow">
        <div id="classify">
          <div id="classify-container"></div>
        </div>
        
        <div id="title-container">
          正在播放：<span id="play_title"></span>
        </div>
      </div>

      <div id="pause"></div>
      <div id="volume">
        <div class="volume-container">
          <div id="volume-bar"></div>
        </div>
        <img src="images/controls/volum.png" alt="" />
      </div>
      <div id="test"></div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/dialog.js"></script>
    <script src="components/series.js"></script>
    <script src="components/video.js"></script>
    <script src="components/live/classify.js"></script>
    <script src="components/live/timer.js"></script>
    <script>
      var hanlderEnter = {}

      function getPreFocus() {
        var typeId = utils.getUrlParam("typeId", "")
        var elId = utils.getUrlParam("elId", "classify-0")
        liveClassify.init({
          typeId: typeId,
          elId: elId,
          index: parseInt(elId.match(/\d+/g))
        })
      }

      function renderBg () {
        $("#main").css('background', 'none')
      }

      function init () {
        page.init()
        renderBg()
        getPreFocus()
        
        video.init({
          type: 'live',
          el: 'body',
          top: 0,
          left: 0,
          width: 1280,
          height: 720,
          seriesId: page.data.series[0].ID
        })

        log.commit({
          name: '慢直播页面',
          type1: 'browse',
          type2: 'live',
          starttime: new Date().getTime(),
        })
        
        dialog.init()
        
      }

      function keyUp () {
        if (!liveClassify.visible) {
          liveClassify.show()
        } else {
          if (page.data.liveClassify.length) {
            liveClassify.prev(function () {
              video.setSeriesId(page.data.series[0].ID)
            })
          }
        }
      }

      function keyDown () {
        if (!liveClassify.visible) {
          liveClassify.show()
        } else {
          if (page.data.liveClassify.length) {
            liveClassify.next(function () {
              video.setSeriesId(page.data.series[0].ID)
            })
          }
          
        }
      }

      function keyLeft () {
        if (dialog.visible) return
        var dom = move.left();
        dom && utils.toggleClass(dom);
      }

      function keyMute () {
       video.toggleMute()
      }

      function keyVolumeUp () {
        video.volumeUp()
      }

      function keyVolumeDown () {
        video.volumeDown()
      }

      function keyRight () {
        if (dialog.visible) return
        var dom = move.right();
        dom && utils.toggleClass(dom);
      }

      function keyEnter () {
        if (dialog.visible) {
          if (dialog.back) {
            page.goback()
          } else {
            dialog.hide()
          }
        } else {
          utils.order()
        }
      }

      function keyBack () {
        //clearInterval(liveClassify.timer);

        page.goback()
        // if (liveClassify.visible) {
        //   liveClassify.hide()
        //   page.goback()
        // } else {
        //   page.goback()
        // }
      }

      function exit () {
        try {
          video.destroy()
        } catch (error) {
          
        }
      }
    </script>
  </body>
</html>
